<template>
    <nav
      :class="[
        'fixed top-0 left-0 w-full z-50 transition-all duration-300 ease-in-out backdrop-blur',
        isScrolledDown
          ? 'h-10 bg-gray-800/70 text-white shadow-text'
          : 'h-16 bg-gray-800 text-white'
      ]"
    >
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
        <div class="flex items-center justify-between h-full">
          <!-- 左侧标题 -->
          <div class="flex-shrink-0 font-semibold" :class="isScrolledDown ? 'text-xl' : 'text-3xl'">
            战例场景管理平台
          </div>
          <!-- 右侧导航，往左偏 -->
          <div class="flex space-x-6 justify-start flex-1 max-w-md ml-4 gap-10">
            <button
              v-for="(item, index) in navItems"
              :key="index"
              @click="navigate(item.path)"
              class="rounded-md font-medium transition border border-transparent px-4 py-2 text-lg"
              :class="{
                'hover:border-white': true,
                'text-white': true,
                'hover:bg-gray-700': true,
                'px-4 py-2': !isScrolledDown,
                'px-2 py-1 text-sm': isScrolledDown,
                'cursor-pointer': true,
              }"
            >
              {{ item.label }}
            </button>
          </div>
        </div>
      </div>
    </nav>
    <router-view />
  </template>
  
  

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const navItems = [
  { label: '战例管理', path: '/battle' },
  { label: '主题服务', path: '/theme' },
  { label: '用户管理', path: '/user' },
]

// 滚动方向逻辑
const isScrolledDown = ref(false)
let lastScrollY = window.scrollY

function onScroll() {
  const currentY = window.scrollY
  if (currentY > lastScrollY && currentY > 50) {
    // 向下滚动
    isScrolledDown.value = true
  } else {
    // 向上滚动
    isScrolledDown.value = false
  }
  lastScrollY = currentY
}

onMounted(() => {
  window.addEventListener('scroll', onScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
})

function navigate(path) {
  router.push(path)
}
</script>

<style scoped>
.shadow-text {
  text-shadow:
    0 0 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.6);
}
</style>
